<template>
    <template>
        <div class="">cms-help-category页面</div>
    </template>
    <div class="box">
      <div class="add">
        <el-button class="add_" type="primary" @click="add_">添加</el-button>
      </div>
      <!-- 表格开始 -->
      <el-table :data="baseData" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="90" />
        <el-table-column prop="name" label="帮助名称" />
        <el-table-column prop="icon" label="分类图标" />
        <el-table-column prop="helpCount" label="专题数量" />
        <el-table-column prop="sort" label="序号" />
        <el-table-column prop="showStatus" label="状态">
          <template #default="scope">
            <el-switch @change="swithCahnge" v-model="scope.row.showStatus" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button plain @click="modify_btn(scope.row)">编辑</el-button>
            <el-button plain @click="del_(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格结束 -->
  
      <!-- 编辑弹出层开始 -->
      <el-dialog v-model="dialogFormVisible" title="编辑帮助" @close="close_event">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="编号" prop="id">
            <el-input
              type="type"
              autocomplete="off"
              placeholder="请输入编号"
            />
          </el-form-item>
          <el-form-item label="帮助名称" prop="name">
            <el-input
              type="type"
              autocomplete="off"
              placeholder="请输入帮助名称"
            />
          </el-form-item>
          <el-form-item label="分类图标" prop="icon">
            <el-input
              type="type"
              autocomplete="off"
              placeholder="请输入图标链接"
            />
          </el-form-item>
          <el-form-item label="专题数量" prop="helpCount">
            <el-input
              type="type"
              autocomplete="off"
              placeholder="请输入专题数量"
            />
          </el-form-item>
          <el-form-item label="序号" prop="sort">
            <el-input
              type="type"
              autocomplete="off"
              placeholder="请输入序号"
            />
          </el-form-item>
          <el-form-item label="状态" prop="showStatus">
            <el-input
              type="type"
              autocomplete="off"
              placeholder="请输入状态"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = !dialogFormVisible">取消</el-button>
            <el-button type="primary" @click="modify_confirm()"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 编辑弹出层结束 -->
  
      <!-- 添加弹出框开始 -->
  
      <el-dialog v-model="add_dialogFormVisible" title="添加帮助分类">
        <el-form :model="addList">
          <el-form-item label="编号：">
            <el-input v-model="addList.id" placeholder="输入编号" />
          </el-form-item>
          <el-form-item label="帮助名称：">
            <el-input v-model="addList.name" placeholder="帮助名称" />
          </el-form-item>
          <el-form-item label="分类图标：">
            <el-input v-model="addList.icon" placeholder="输入链接" />
          </el-form-item>
          <el-form-item label="专题数量：">
            <el-input v-model="addList.helpCount" placeholder="专题数量" />
          </el-form-item>
          <el-form-item label="状态：">
            <el-input v-model="addList.showStatus" placeholder="0 或 1" />
          </el-form-item>
          <el-form-item label="排序：">
            <el-input v-model="addList.sort" placeholder="输入序号"/>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="AAA()">取消</el-button>
            <el-button type="primary" @click="BBB()"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
  
      <!-- 添加弹出框结束 -->
    </div>
  </template>
  <script setup>
  import { one, modify_post, del, add } from "./http/cms_help_category";
  import { ElMessage } from "element-plus";
  import { reactive, ref } from "vue";
  const baseData = reactive([]);
  // 初次渲染页面
  Initial_rendering();
  function Initial_rendering() {
    baseData.length = 0;
    for (let i = 0; i <= 30; i++) {
      one(i).then((v) => {
        baseData.push(v.data.data.help);
      });
    }
  }
  //删除操作
  const del_ = (i) => {
    del(i).then(() => {
  
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    Initial_rendering();
  
    });
  };
  const swithCahnge = () => {
    console.log(baseData[0].showStatus);
  };
  const dialogFormVisible = ref(false);
  const ruleForm = reactive({
    id: "",
    name: "",
    icon: "",
    helpCount: "",
    showStatus: "",
    sort: ""
  });
  
  const close_event = () => {
    ruleForm.id = "";
    ruleForm.name = "";
    ruleForm.icon = "";
    ruleForm.helpCount = "";
    ruleForm.showStatus = "";
    ruleForm.sort = "";
  };
  //编辑按钮
  const modify_btn = (i) => {
    dialogFormVisible.value = !dialogFormVisible.value;
    ruleForm.id = i.id;
    ruleForm.name = i.name;
    ruleForm.icon = i.icon;
    ruleForm.helpCount = i.helpCount;
    ruleForm.showStatus = i.showStatus;
    ruleForm.sort = i.sort;
  };
  //编辑确认按钮
  const modify_confirm = () => {
    modify_post(ruleForm).then(() => {
    ElMessage({
      message: "修改成功",
      type: "success",
    });
    dialogFormVisible.value = !dialogFormVisible.value;
    Initial_rendering();
    });
  };
  // 添加部分
  const add_dialogFormVisible = ref(false);
  const add_ = () => {
    console.log("添加");
    add_dialogFormVisible.value = !add_dialogFormVisible.value;
  };
  const addList = reactive({
    createTime: new Date(),
    id: "",
    name: "",
    icon: "",
    helpCount: "",
    showStatus: "",
    sort: ""
  });
  const AAA = () => {
    Object.assign(addList, {
      id: "",
      name: "",
      icon: "",
      helpCount: "",
      showStatus: "",
      sort: ""
    });
    add_dialogFormVisible.value = !add_dialogFormVisible.value;
    console.log(addList);
  };
  const BBB = () => {
    add(addList).then(() => {
      Initial_rendering();
    });
    add_dialogFormVisible.value = !add_dialogFormVisible.value;
  };
  </script>
  
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  </style>
  